iT邦幫忙

DAY 18
2

jQuery 套件開發之我可不可以跳著說系列 第 14

jQuery套件開發之(十七),實作drag的的部分

  • 分享至 

  • xImage
  •  

因為我的dialog想要有拖曳功能,先寫一個drag的測試頁面吧

<style>
#drag {
    cursor: move ;
    position: absolute ;
}
</style>
<script>
$(function()
{
    $(document)
        .on('mousedown', '#drag', function(orgiE)
        {
            var self = $(this) ;
            var _position = self.position() ;
            var orgiLeft = _position.left ;
            var orgiTop = _position.top ;
            
            self
                .mousemove(function(moveE)
                {
                    self
                        .css(
                        {
                              left: orgiLeft + ( moveE.clientX - orgiE.clientX )
                            , top: orgiTop + (moveE.clientY - orgiE.clientY )
                        }) ;
                }) ;
        })
        .on('mouseup', '#drag', function(e)
        {
            $(this).off('mousemove') ;
        }) ;
}) ;
</script>
<div id='drag' style="width:100px;height:100px;background:gray;">test</div>

http://ry.url.tw/wp/doc/a17testDRAG.htm


上一篇
jQuery套件開發之(十六),寫套件常用的兩個function
下一篇
jQuery套件開發之(十八),寫套件時,綁定事件要小心
系列文
jQuery 套件開發之我可不可以跳著說26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言